<template>
  <view class="page-view">

    <view class="top-bg">
      <u-sticky>
        <view class="return" @click="goToBack()">
          <u-icon name="arrow-left" color="#ffffff " bold="true" size="38"></u-icon>
        </view>
		有限空间作业
		<view class="checkTab">
		  <view v-for="(i,index) in columns1" :key="index" class="checkItem" @click="checkedTypeFn(i.value)">
		    <view :class="typeValue !==i.value ? 'unchecked':''">
		      {{i.name}}<text v-if='i.count'>({{i.count}})</text>
		    </view>
		    <view v-if="typeValue===i.value" class="selectedBottom"></view>
		  </view>
		</view>
      </u-sticky>
    </view>
    <view class="posBox">
      <view class="list-wrap" :style="{ height: 'calc(100vh - 298rpx)' }">
		  <view class="nodata" v-if="workList.length==0">
		    <image class="noDataImg" src="@/static/icon/noData.png"></image>
		  </view>
        <scroll-view scroll-y="true" class="scroll-Y" @scrolltolower="handleGetMore">
          <view class="task-item" v-for="(item, index) in workList" :key="index" >
			  <view class="" @click="goToDetail(item)">
			  	<view class="riskLevel" v-if="item.riskLevel==1">高风险</view>
			  	  <view class="riskLevel" style="opacity: 0.6;" v-if="item.riskLevel==2">一般风险</view>
			  	  <view class="workPos"><view class="border"></view>{{item.workArea}}</view>
			  	<view class="info-row"> <text>审批单编号</text>{{item.workNo	}} </view>
			  	<view class="info-row"> <text>作业内容</text>{{ item.workDetail}}</view>
			  	<view class="info-row"> <text>作业人员</text>{{ item.siteWorker }}</view>
			  	<view class="info-row"> <text>计划作业日期</text>{{ item.planWorkDateBegin|filterDate}}~{{item.planWorkDateEnd|filterDate}}</view>
			  </view>
			<view class="btnBox" v-if="item.status==1">
				<view class="btn-item" @click="disallowedFn(item)">驳回</view>
				 <view class="btn-item" style="color: #fff;background: #2769f7;border-radius: 0rpx 0rpx 10rpx 0rpx;" @click="approveFn(item)">同意</view>
				</view>
           	<view class="submitBtn2" v-if="item.status==2">
           	  <u-button @click="disallowedFn(item)" :loading="loading" customStyle="height:48rpx;font-size:24rpx;border-radius: 10rpx;" text="开始作业" color="#428ffc" throttleTime="1000">
           	  </u-button>
           	</view>
			<view class="submitBtn2" v-if="item.status==3">
			  <u-button @click="disallowedFn(item)" :loading="loading" customStyle="height:48rpx;font-size:24rpx;border-radius: 10rpx;" text="作业完成" color="#428ffc" throttleTime="1000">
			  </u-button>
			</view>
          </view>
        </scroll-view>
      </view>
    </view>
	<view class="addBtn">
	  <u-button @click="addWorkFn" :loading="loading" text="新建作业申请" customStyle="width:80%" color="#428ffc" throttleTime="1000">
	  </u-button>
	</view>
    <u-popup :show="disposeShow" @close="close" @open="open" mode="center" round="10" closeable overlayOpacity='0.2'
      customStyle='margin: 0rpx 40rpx;'>
	  <view v-if="item.status==1">
      <view class="title">审批意见弹窗</view>
       <view class="info-row2" style="padding: 0 48rpx;"><text>审批意见</text>
         <u--textarea placeholder="请输入审批意见" v-model="item.approvalComments" ></u--textarea>
      </view>
      <view class="submitBtn">
        <u-button @click="submit()" :loading="loading" customStyle="height:48rpx;border-radius: 10rpx;" text="确定" color="#428ffc" throttleTime="1000">
        </u-button>
      </view>
	  </view>
	  <view v-if="item.status==2">
	  <view class="title">作业留痕清单</view>
	  <view class="popupBox">
	  	<view class="tips-red"><view style="width: 22%;">提示：</view>上传所有作业人员正确佩戴安全帽、安全绳、呼吸器的照片。</view>
	  	<u-checkbox-group v-model="checkbox" placement="column">
	  		<u-checkbox v-for="(item, j) in checkboxList" :key="j" :name="item.name" :label="item.label"
	  			:customStyle="{ marginRight: '16rpx',marginBottom: '30rpx',fontWeight: 'bold'}" size="28" iconSize="26" labelSize='24'></u-checkbox>
	  	</u-checkbox-group>
	  	 <view class="info-row2"><text>上传图片</text>
	  	   <u-upload width="120" height="120" :previewFullImage="true" :fileList="tp" name="tp"
	  	     @afterRead="afterRead" @delete="deletePic" multiple :maxCount="8">
	  	   </u-upload>
	  	</view>
	  </view>  
	<view class="submitBtn2">
	  <u-button @click="startHomework()" :loading="loading" customStyle="height:48rpx;font-size:24rpx;border-radius: 10rpx;" text="开始作业" color="#428ffc" throttleTime="1000">
	  </u-button>
	</view>
	  </view>
	  <view v-if="item.status==3">
	    <view class="title">作业完成弹窗</view>
	    <view class="popupBox">
	    	<view class="tips-red"><view style="width: 22%;">提示：</view>请拍摄现场恢复、人员设备清点完毕的照片。</view>
	    	 <view class="info-row2"><text>上传图片</text>
	    	   <u-upload width="120" height="120" :previewFullImage="true" :fileList="tpWc" name="tpWc"
	    	     @afterRead="afterRead" @delete="deletePicWc" multiple :maxCount="8">
	    	   </u-upload>
	    	</view>
	    </view>  
	  <view class="submitBtn2">
	    <u-button @click="homeworkWc()" :loading="loading" customStyle="height:48rpx;font-size:24rpx;border-radius: 10rpx;" text="作业完成" color="#428ffc" throttleTime="1000">
	    </u-button>
	  </view>
	    </view>
    </u-popup>
  </view>
</template>
<script>
import { getDictItemInfo } from '@/api/system.js';
import { getSpaceWorkList, editSpaceWork,getSpaceWorkCount} from '@/api/spaceWork.js';
import { commonUploadPic } from '@/api/common.js';
export default {
  filters: {
    filterDate(dateStr) {
      if (dateStr) {
        dateStr = dateStr.replaceAll('-', '/');
        return new Date(dateStr).format('yyyy-MM-dd hh');
      } else {
        return '';
      }
    },
  },
  data() {
    return {
		columns1: [
		{
		  name: '待审批',
		  value: 1,
		  count:0
		},
		{
		  name: '待执行',
		  value: 2,
		  count:0
		},
		{
		  name: '进行中',
		  value: 3,
		  count:0
		},
		{
		  name: '已完成',
		  value: 4,
		  count:0
		},{
		  name: '全部',
		  value: '',
		  count:0
		}
		],
		typeValue: 1,
		countData:{},
		checkboxList:[{
	                name: 1,
	             	label: '个人防护装备到位'
	             }, {
	             	name: 2,
	             	label: '应急救援设备到位'
	             }, {
	             	name: 3,
	             	label: '确认所有安全措施已落实，现场环境安全，可以开始作业。'
	             }],
		checkbox:[1,2,3],
		maxDate: new Date().format('yyyy-MM-dd'),
      item: {},
      tp: [],
	  tpWc:[],
      disposeShow: false,
      total: null,
      params: {
        page: 1,
        pageSize: 30,
      },
      workList: [],
      taskList: [],
    };
  },
  created() {
    
  },
  onShow() {
    this.getSpaceWorkList()
	
  },
  mounted() { },
  methods: {
    goToBack() {
		uni.navigateTo({
			url: '/pages/home/home'
		})
    },
	async getSpaceWorkCount() {
		const res=await getSpaceWorkCount()
		let countData=res.data.result
		this.columns1[0].count=countData.one
		this.columns1[1].count=countData.two
		this.columns1[2].count=countData.three
		this.columns1[3].count=countData.four
		this.columns1[4].count=countData.total
		console.log(res.data);
	},
	goToDetail(i) {
		uni.navigateTo({
		  url: `/subpack_YunWei/yxkjzy/detail?id=${i.id}`
		})
	},
	approveFn(item){
		this.item=item
		this.item.approvalComments='同意'
		this.item.status=2
		this.editSpaceWork()
	},
	// 驳回
	disallowedFn(item){
		this.item=item
		this.disposeShow = true
	},
	 submit() {
		 if(!this.item.approvalComments){
			 uni.showToast({
			 	title: '请输入审批意见',
			 	icon: 'error',
			 });
			 return;
		 }
		 this.isReject=1
		this.item.status=4
		this.editSpaceWork()
	},
	startHomework(){
		console.log(this.tp,'10.2777');
		if(this.checkbox.length==0||this.tp.length==0){
			 uni.showToast({
			 	title: '请选择',
			 	icon: 'error',
			 });
			 return;
		 }
		 const res = this.checkbox.some(item => item==1)
		 const res2 = this.checkbox.some(item => item==2)
		 const res3 = this.checkbox.some(item => item==3)
		 this.item.personalProtectCheck=res?1:0
		 this.item.rescueCheck=res2?1:0
		 this.item.commitCheck=res3?1:0
		 this.item.checkPic=this.tp.map(item => item.url).join(','),
		 // this.form.picUper=uni.getStorageSync('realname')
		this.item.status=3
		this.editSpaceWork()
	},
	homeworkWc(){
		if(this.tpWc.length==0){
			 uni.showToast({
			 	title: '请选择图片',
			 	icon: 'error',
			 });
			 return;
		 }
		 this.item.finishPic=this.tpWc.map(item => item.url).join(','),
		 // console.log(this.tpWc,this.item.finishPic,'2888888888888888888888888');
		this.item.status=4
		this.editSpaceWork()
	},
	async editSpaceWork() {
	  const res = await editSpaceWork({
	    ...this.item
	  })
	  if (res.data.code == 200) {
	    uni.showToast({
	      title: res.message
	    })
	    this.disposeShow = false
	    this.page = 1
	    this.getSpaceWorkList()
	  } else {
	    uni.showToast({
	      title: res.data.message,
	      icon: 'none'
	    })
	  }
	},
	addWorkFn(){
		uni.navigateTo({
			url: '/subpack_YunWei/yxkjzy/addWorkApply'
		})
	},
	checkedTypeFn(type) {
	  this.typeValue = type
	  this.page = 1
	  this.pageSize = 30
	  this.getSpaceWorkList()
	},
    async getSpaceWorkList() {
      const res = await getSpaceWorkList({
        ...this.params,
		status:this.typeValue,
		orderByAsc:'finishPicDate'
      })
      if (res.data.result) {
        this.workList = res.data.result.records
        this.total = res.data.result.total
		this.getSpaceWorkCount()
      } else {
        this.workList = []
        this.total = 0
      }
      console.log(res.data);
    },
    async afterRead(event) {
      // 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
      let lists = [].concat(event.file)
      let fileListLen = this[event.name].length
      lists.map((item) => {
        this[event.name].push({
          ...item,
          status: 'uploading',
          message: '上传中'
        })
      })
      for (let i = 0; i < lists.length; i++) {
        const result = await this.uploadFilePromise(lists[i].url)
        let item = this[event.name][fileListLen]
        this[event.name].splice(fileListLen, 1, Object.assign(item, {
          status: 'success',
          message: '',
          url: result
        }))
        fileListLen++
      }
    },
    async uploadFilePromise(url) {
      const res = await commonUploadPic(url, 1)
      console.log(res, 'uploadHttp')
      let d = JSON.parse(res.data)
      if (d.code == 200) {
        return d.result
      }
    },
    // 删除图片
    deletePic(event) {
      this.tp.splice(event.index, 1)
    },
	deletePicWc(event) {
	  this.tpWc.splice(event.index, 1)
	},
   open() {
      // console.log('open');
    },
    close() {
      this.disposeShow = false
    },
    handleGetMore() {
      this.params.page++;
      if (this.total && this.taskList.length >= this.total) {
        return;
      }
      // this.getOmPoliceList();
    }
  },
};
</script>
<style scoped lang="scss">
.page-view {
  height: 100vh;
  // background: #f8f9fb;
  position: relative;
  overflow: hidden;
}
.addBtn{
	position: absolute;
	bottom: 0;
	height: 144rpx;
	width: 100%;
	background: #ffffff;
	padding-top: 50rpx;
}
.posBox {
  position: absolute;
  top: 260rpx;
}
.nodata {
  margin-top: 280rpx;
  margin-left: 139rpx;
  .noDataImg {
    width: 472rpx;
    height: 522rpx;
  }
}
.top-bg {
  width: 100%;
  height: 330rpx;
  background: #2769f7;
  border-radius: 0rpx 0rpx 140rpx 140rpx;
  padding-top: 104rpx;
  text-align: center;
  font-weight: 600;
  font-size: 40rpx;
  color: #ffffff;
  letter-spacing: 4rpx;
  position: relative;
  .return {
    position: absolute;
    left: 32rpx;
    margin-top: 8rpx;
  }
}
 .checkTab {
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 25rpx 32rpx 10rpx 32rpx;
    .checkItem {
      font-weight: bold;
      display: inline-block;

      font-size: 28rpx;
      display: flex;
      flex-direction: column;
      align-items: center;
      .selectedBottom {
        width: 29rpx;
        height: 4rpx;
        background: #ffffff;
        border-radius: 5rpx 5rpx 5rpx 5rpx;
        z-index: 0;
        margin-top: 4rpx;
      }
    }
    .unchecked {
      font-weight: 400;
      font-size: 24rpx;
    }
  }
.scroll-Y {
  height: 87%;
}

.task-item {
  width: 686rpx;
  // height: 556rpx;
  position: relative;
  margin: 0 32rpx 32rpx 32rpx;
  background: #ffffff;
  border-radius: 10rpx 10rpx 10rpx 10rpx;
  font-weight: bold;
  font-size: 24rpx;
  padding:16rpx 0;
  .riskLevel{
	  position: absolute;
	  right: 16rpx;
	  top: 16rpx;
	  width: 102rpx;
	  height: 40rpx;
	  text-align: center;
	  line-height: 40rpx;
	  background: #FFEBEF;
	  border-radius: 6rpx;
	  font-size: 20rpx;
	  color: #FF0200;
  }
}
.workPos{
	width: 79%;
	margin-left: 28rpx;
	display: flex;
	align-items: center;
	margin-bottom: 24rpx;
	.border{
		width: 8rpx;
		height: 20rpx;
		background: #2769F7;
		border-radius: 6rpx 6rpx 6rpx 6rpx;
		opacity: 0.6;
		margin-right: 14rpx;
	}
}
.info-row2 {
  font-weight: bold;
  font-size: 24rpx;
  color: #989898;
  display: flex;
  margin: 34rpx 0 0 0;
  text {
    margin-right: 24rpx;
    color: #989898;
    display: inline-block;
  }
}
.info-row3 {
  display: flex;
  align-items: center;
  margin-bottom: 16rpx;
}
.info-row {
  color: #5e5e5e;
  display: flex;
  margin: 0 20rpx 14rpx 50rpx;
  text {
    width: 27%;
    color: #989898;
    display: inline-block;
  }
}
.btnBox{
	width: 100%;
	display: flex;
	font-weight: bold;
	font-size: 28rpx;
	margin-top: 24rpx;
	margin-bottom: -16rpx;
.btn-item {
  width: 50%;
  height: 76rpx;
  text-align: center;
  line-height: 76rpx;
  background: #E6EEFF;
  color: #2769F7;
  cursor: pointer;
  border-radius: 0rpx 0rpx 0rpx 10rpx;
}	
}
.popupBox{
	width: 90%;
	margin-left: 42rpx;
	.tips-red{
		font-weight: 400;
		font-size: 28rpx;
		color: #FF0200;
		display: flex;
		margin-top: 26rpx;
		margin-bottom: 36rpx;
	}
}
.title {
  text-align: center;
  margin-top: 32rpx;
  font-weight: 800;
  font-size: 32rpx;
  color: #4a4a4a;
}
.infoBox {
  margin: 32rpx 24rpx 0 24rpx;
  font-weight: bold;
  font-size: 24rpx;
  text {
    width: 19%;
  }
}
.submitBtn {
  margin: 36rpx 280rpx 32rpx 280rpx;
}
.submitBtn2 {
  margin: 36rpx 264rpx 0 264rpx;
  padding-bottom: 28rpx;
}
/deep/ .u-textarea {
		width: 460rpx;
		height: 234rpx;
		background-color: #F2F6F7 !important;
		border-radius: 10rpx;
	}
	/deep/ .u-textarea__field {
	font-weight: 400;
	 color: #4a4a4a !important;
	  font-size: 24rpx !important;
	}
/deep/ .u-input--radius {
  // width: 324rpx;
  // height: 60rpx;
  background: #f2f6f7;
  border-radius: 10rpx 10rpx 10rpx 10rpx;
}
/deep/ .u-search__content {
  padding: 0 10rpx !important;
}
/deep/.u-icon__icon {
  font-size: 30rpx !important;
}
</style>
